<template>
  <!-- 1. 用一个根节点包裹所有内容，解决多根节点问题 -->
  <div class="filter-container mt-[15px]">
    <el-dropdown trigger="click" placement="bottom">
      <span class="el-dropdown-link">
        {{options1.find(opt => opt.value === modelValue.sortby)?.label || '时间降序'}}
        <el-icon class="el-icon--right">
          <ArrowDown />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in options1" :key="item.value" :value="item.value" @click="sortby = item.value">
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dropdown trigger="click" placement="bottom">
      <span class="el-dropdown-link">
        {{optionRange.find(opt => opt.value === timeRangeText)?.label || '时间范围'}}
        <el-icon class="el-icon--right">
          <ArrowDown />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in optionRange" :key="item.value" :value="item.value"
            @click="handleRangeSelect(item.value)">
            <span>{{ item.label }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dropdown class="shrink-0">
      <span class="el-dropdown-link">
        {{addModeOptions.find(opt => opt.value === addMode)?.label || '添加方式'}}
        <el-icon class="el-icon--right">
          <ArrowDown />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in addModeOptions" :key="item.value" :value="item.value"
            @click="addMode = item.value">
            <span>{{ item.label }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dropdown class="shrink-0">
      <span class="el-dropdown-link">
        {{publishOptions.find(opt => opt.value === isPublished)?.label || '发布状态'}}
        <el-icon class="el-icon--right">
          <ArrowDown />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in publishOptions" :key="item.value" :value="item.value"
            @click="isPublished = item.value">
            <span>{{ item.label }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dialog v-model="rangeSelector" :modal="false">
      <el-date-picker-panel v-model="timeRangeCustom" type="daterange" format="YYYY-MM-DD " value-format="YYYY-MM-DD"/>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="rangeSelector = false">Cancel</el-button>
          <el-button type="primary" @click="handleRangeCustom">Confirm</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect, defineModel } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
import dayjs from 'dayjs';

// 2. 声明 props 接收父组件的 modelValue
const props = defineProps<{
  modelValue: {
    addMode: string | null;
    isPublished: boolean | null;
    timeRange: [string, string] | null;
    sortby: number | null;
  };
}>();


const rangeSelector = ref(false);
const filterModel = defineModel();

const options1 = [
  { value: 1, label: '时间升序' },
  { value: 0, label: '时间降序' },
];

const optionRange = [
  { value: 'all', label: '全部' },
  { value: 'lastweek', label: '上周' },
  { value: 'custom', label: '自定义' },
];

const addModeOptions = [
  { value: -1, label: '全部' },
  { value: 0, label: '手动添加' },
  { value: 1, label: '自动添加' },
];

const publishOptions = [
  { value: -1, label: '全部' },
  { value: 0, label: '已发布' },
  { value: 1, label: '未发布' },
];

const sortby = ref(1)
const timeRange = ref<[string, string]>()
const timeRangeText = ref<string>()
const addMode = ref(-2)
const isPublished = ref(-2)
const timeRangeCustom = ref()
const handleRangeSelect = (value: string) => {
  if (value === 'lastweek') {
    const lastMonday = dayjs().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD')
    const lastSunday = dayjs().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD')
    timeRange.value = [lastMonday, lastSunday]
  }
  if (value === 'custom') {
    rangeSelector.value = true
  }
  if (value === 'all') {
    timeRange.value = undefined

  }
  timeRangeText.value=value

}

const handleRangeCustom = () => {
  timeRange.value = timeRangeCustom.value
  rangeSelector.value = false
}

watchEffect(() => {
  filterModel.value = {
    addMode: addMode.value,
    isPublished: isPublished.value,
    timeRange: timeRange.value,
    sortby: sortby.value,
  };
})
</script>

<style scoped>
.filter-container {
  display: flex;
  gap: 16px;
  /* 两个下拉框之间的间距 */
  align-items: center;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #000000;
  white-space: nowrap;
}
</style>